<template>
  <div class="main">
    <video muted autoplay loop class="video">
      <source
        src="https://github.githubassets.com/images/modules/site/enterprise/launchpad/hero/enterprise-deathcat.h264.mp4">
    </video>
    <div class="box">
    </div>
    <div class="login">
      <div class="top">
        <h1>后台管理员登录入口</h1>
      </div>
      <el-input class="input" v-model="username" placeholder="请输入账号" autofocus="true" />
      <form>
        <el-input class="input" placeholder="请输入密码" v-model="password" show-password />
      </form>
      <el-button class="button" type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>
<script>
import { selectLogin } from '@/api/api'
export default {
  data() {
    return {
      username: "",
      password: "",
    }
  },
  mounted() {
  },
  methods: {
    login() {
      selectLogin().then((res) => {
        console.log(res);
        const arr = res.data
        for (let i = 0; i < arr.length; i++) {
          let flag = arr[i].username == this.username && arr[i].password == this.password
          if (flag) {
            this.$message({
              message: `${res.data[i].name}登录成功!`,
              type: 'success'
            });
            sessionStorage.setItem('token', res.data[i].token)
            localStorage.setItem("name", res.data[i].name)
            localStorage.setItem("image", res.data[i].image)
            this.$router.push("/home")
            return
          }
        }
        this.$message.error('账号或密码错误!');
      })
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.top {
  background: url("../assets/bg2.jpg") no-repeat;
  background-size: 100%;
  height: 200px;
  line-height: 160px;
  margin-bottom: 26px;
}

.login {
  z-index: 3;
  box-shadow: -10px -10px 10px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: inset;
  width: 600px;
  height: 460px;
  border-radius: 30px;
  color: #fff;
}

.input {
  width: 300px;
  margin: 10px auto;
  border: 0;
}

.button {
  width: 300px;
  margin: 30px auto;
}

.video {
  z-index: 1;
  width: 100%;
  /* margin: 0 220px; */
}

.box {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
}

body {
  background: #000;
}
</style>